avatar = {}
avatar.img = {}

# SORTABLE WIDGET & PROFILE BLOCK
$("#block_sortable").sortable()
$("#widget_sortable").sortable()
$("#social_icon_sortable").sortable()

# Hide Widget Content
$('.user_widget_block').css 'display':'none'

# Show Close Button in Widget
$('.user_widget_block').hover ->
    $(this).find('.user_widget_close').css 'display', 'block'
    return
, ->
    $(this).find('.user_widget_close').css 'display', 'none'
    return

###
#   When hover into Avatar
#
#   .user_avatar:   avatar
#   img:            camera icon
###
$('.user_avatar_area').hover ->
    $('.user_avatar').css
        opacity :   0.3
        filter:     'alpha(opacity=30)'
        zoom:       1

    $('.user_change_avatar_icon img').css
        opacity:    1
        filter:     'alpha(opacity=100)'
        zoom:       1
        cursor:     'pointer'
        'z-index':  999

    $(this).css
        cursor:     'pointer'
    return
, ->
    $('.user_avatar').css
        opacity :   1
        filter:     'alpha(opacity=100)'

    $('.user_change_avatar_icon img').css
        opacity:    0.3
        filter:     'alpha(opacity=30)'
        zoom:       1
        cursor:     'normal'
        'z-index':  0

    return

# Click "Choose from Computer" Button
$('#user_upload_avatar').click ->
    $('.user_upload_avatar input').click()
    return

# If choose OK
$('.user_upload_avatar input').change (e) ->
    loading = '<img style="margin-top:45%;width:60px" alt="Please wait ..." class="loading_small" src="'+app.root+'/img/app/app/loading.gif">'
    $('#user_avatar_background').css 'background', 'aliceblue'
    $('.profile_original_avatar').html loading
    return

# Function MAX
max = (x, y) -> if x < y then x else y

# Function MIN
min = (x, y) -> if x > y then x else y

# Set JCrop
setTimeout ->
    avatar.square = 400
    avatar.maxint = 9999999
    avatar.width_org = $('#original_avatar')[0].naturalWidth
    avatar.height_org = $('#original_avatar')[0].naturalHeight
    avatar.max_square = max(avatar.width_org, avatar.height_org)
    avatar.ratio = avatar.square / avatar.max_square
    avatar.width = Math.floor avatar.width_org * avatar.ratio
    avatar.height = Math.floor avatar.height_org * avatar.ratio
    avatar.size = min(avatar.width, avatar.height)

    avatar.change = (img) ->
        avatar.img.x = Math.floor img.x
        avatar.img.y = Math.floor img.y
        avatar.img.s = Math.floor img.w
        return

    $('#original_avatar').css
        width: avatar.width
        height: avatar.height

    # Drop Image
    $('#original_avatar').Jcrop
        boxWidth: avatar.width
        boxHeight: avatar.height
        onChange: avatar.change
    , ->
        avatar.api = this
        avatar.api.setOptions
            keySupport: false
            aspectRatio: 1/1
            minSize: [100, 100]

        avatar.api.focus()
        avatar.img.x = Math.floor (avatar.width-avatar.size)/2
        avatar.img.y = Math.floor (avatar.height-avatar.size)/2
        avatar.img.s = avatar.maxint

        avatar.api.setSelect [avatar.img.x, avatar.img.y, avatar.img.s,avatar.img.s]
        return
    , 500

    return

# hoverMenu Function
hoverMenu = (parent, target, tabcontent) ->
    $(target).click ->
        $(".index-menu-area").fadeOut()
        $(".index-notify-icon, .index-avatar-small").css 'background','#1ab7f2'

        $(tabcontent).toggle()

        if ($(tabcontent).is ':hidden')
            $(target).css background: '#1ab7f2'
        else
            $(target).css background: '#17a4d9'

        return
    return

# Connection Menu
hoverMenu(".index-notice-connection", ".index-notice-connection", ".index-area-connection")

# Message Menu
hoverMenu(".index-notice-message", ".index-notice-message", ".index-area-message")

# Status Menu
hoverMenu(".index-notice-status", ".index-notice-status", ".index-area-status")

# Option Menu
hoverMenu(".index-option-setting", ".index-option-setting", ".index-area-setting")


$(".index-area-setting li").click ->
    href = $(this).find('a').attr 'href'
    window.location.href = href
    return

#17a4d9
$(".index-notify-icon, .index-account-avatar").hover ->
    unless $(this).css('background-color') is 'rgb(23, 164, 217)'
        $(this).css 'background', '#30bef3'
    return
, ->
    unless $(this).css('background-color') is 'rgb(23, 164, 217)'
        $(this).css 'background', '#1ab7f2'
    return

`
var User = angular.module('user', ['ngDragDrop']);
var avatar = {};
avatar.img = {};

User.controller('profileController', function($scope) {
    for (i in widgets) {
    $cmd = '$scope.widget_item_'+widgets[i].id+'={title:"'+widgets[i].name+'"};';
    eval($cmd);
    $cmd = '$scope.widget_profile_'+widgets[i].id+'={};';
    eval($cmd);
}

$scope.changeAvatar = function() {
$('#user_avatar_donebt').addClass('disabled');
send('changeAvatar', avatar.img, function(result) {
console.log(result);
    $('#user_avatar_donebt').removeClass('disabled');
    $('#changeAvatar').modal('hide');
});
}
});
`